<ons-page id="df-example">
    <ons-toolbar>
        <div class="left"><ons-back-button class="tmpl-btn">返回</ons-back-button></div>
        <div class="center">垫付图例</div>
    </ons-toolbar>
    <ons-card class="example">
        <div class="example-tit">1. 搜索结果页</div>
        <img class="example-img" src="/img/df-guide/1.png" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">2. 随机商品1 </div>
        <img class="example-img" src="/img/df-guide/2.png" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">3. 随机商品2</div>
        <img class="example-img" src="/img/df-guide/3.png" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">4. 目标商品头部</div>
        <img class="example-img" src="/img/df-guide/4.png" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">5. 商品评价</div>
        <img class="example-img" src="/img/df-guide/5.jpeg" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">6. 商品详情</div>
        <img class="example-img" src="/img/df-guide/6.png" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">7. 加入购物车</div>
        <img class="example-img" src="/img/df-guide/7.png" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">8. 聊天</div>
        <img class="example-img" src="/img/df-guide/8.png" alt="">
    </ons-card>
    <ons-card class="example">
        <div class="example-tit">9. 下单支付 </div>
        <img class="example-img" src="/img/df-guide/9.jpeg" alt="">
    </ons-card>
</ons-page>
